<!--
 * @Author       : 方远 15668450208@163.com
 * @Date         : 2024-04-13 17:56:26
 * @LastEditors  : 方远 15668450208@163.com
 * @LastEditTime : 2024-07-31 10:46:53
 * @FilePath     : \zhlx-autoform-ui\src\components\ZHLX-Components\ZHLX-unitSelect\index.vue
 * @Description  : 介绍文件的作用
 * 
 * Copyright (c) 2024 by zhlx - 15668450208@163.com, All Rights Reserved. 
-->
<template>
  <div class="unit-select-container" style="width: 100%;">
    <el-input type="textarea" autosize v-model="unitSelectValue" readonly @click="handleOpenUnitSelect"
      :placeholder="field.options.placeholder" :disabled="disabled" style="width: 100%; line-height: 26px;"></el-input>
    <!-- 弹窗区域 -->
    <unitDialog :value="unitDialogVisible" :unitList="unitList" @updateUnitList="updateUnitList"
      :title="field.options.label" @changeVisiable="unitDialogVisible = $event"></unitDialog>
    <!-- 弹窗区域结束 -->
  </div>
</template>

<script>
import unitDialog from "./unitDialog";

export default {
  name: "ZHLX-unitSelect",
  components: {
    unitDialog,
  },
  props: {
    field: {
      default: {},
      type: Object,
    },
    disabled: {
      type: Boolean,
      default: false,
    }
  },
  watch: {
    field: {
      deep: true,
      handler(val) {
        this.unitList = val.options.defaultValue ? (this.isJSON(val.options.defaultValue) ? JSON.parse(val.options.defaultValue) : val.options.defaultValue) : [];
        this.updateUnitSelectValue();
      },
      immediate: true,
    }
  },
  data() {
    return {
      unitSelectValue: "", // 单位选择输入框的值
      unitDialogVisible: false, // 单位选择弹窗是否出来控制变量
      unitList: [], // 单位列表
    };
  },
  methods: {
    
    /**
     * 提取了一个新方法来处理unitList的更新
     */
    updateUnitSelectValue() {
      // 对 unitList 进行校验，确保它是一个有效的数组
      if (!Array.isArray(this.unitList) || this.unitList.length === 0) {
        this.unitSelectValue = ''; // 如果 unitList 不可用，将 unitSelectValue 置为空字符串
        return;
      }

      // 使用模板字符串和map来提高代码的可读性
      // 对每个item的name和append进行转义处理以预防XSS攻击（示例使用了一个假定的escapeHtml函数）
      this.unitSelectValue = this.unitList
        .filter(item => item.name !== '')
        .map(item => `${item.name}${item.append}`)
        .join('');
    },
    // 假定的escapeHtml函数，用于转义HTML特殊字符，预防XSS攻击
    escapeHtml(text) {
      const map = {
        '&': '&amp;',
        '<': '&lt;',
        '>': '&gt;',
        '"': '&quot;',
        "'": '&#039;'
      };
      return text.replace(/[&<>"']/g, char => map[char]);
    },
    updateUnitList(unitList) {
      this.unitSelectValue = unitList.filter(item => item.name != '').map((item) => item.name + item.append).join('');
      // 空数组情况下需置空，否则不会触发校验
      this.$emit("input", (unitList && unitList.length) ? JSON.stringify(unitList) : "");
    },
    handleOpenUnitSelect() {
      // 打开弹窗的事件
      if (this.field.options.disabled) return;
      this.unitList = this.field.options.defaultValue ? (this.isJSON(this.field.options.defaultValue) ? JSON.parse(this.field.options.defaultValue) : this.field.options.defaultValue) : [];
      this.unitDialogVisible = true;
    },
    /**
     * 判断是否是json字符串
     */
    isJSON(str) {
      try {
        JSON.parse(str);
      } catch (e) {
        return false;
      }
      return true;
    },
  },
};
</script>

<style scoped lang="scss">
.unit-select-container{
  height: 100%;
}
:deep(.el-textarea__inner) {
  padding: 0px 0 0 10px !important;
  &::placeholder {
    background: transparent !important;
  }
}
</style>